<template>
	<view class="">
		<view class="container" v-if="info.type == 'handle' || info.paymentType == 1">
			<view class="title" @click="info.paymentType = 1">
				<view class="title_left u-flex">
					<image src="/static/trad/y1.png" mode=""></image>
					银行卡
				</view>
				<view class="title_right">
					<image v-if="info.paymentType == 1" src="/static/c6.png" mode=""></image>
					<image v-else src="/static/c1.png" mode=""></image>
				</view>
			</view>
			<view class="list" v-show="info.paymentType == 1">
				<view class="item">
					<view class="t">卡号</view>
					<view class="b">
						<input
							@input="handleInput"
							@blur="handleBlur"
							:disabled="info.type == 'handle' ? false : true"
							type="text"
							v-model="info.paymentAccount"
							placeholder="请输入"
							placeholder-class="pclass1"
						/>
					</view>
				</view>
				<view class="item">
					<view class="t">户名</view>
					<view class="b">
						<input :disabled="info.type == 'handle' ? false : true" type="text" v-model="info.paymentName" placeholder="请输入" placeholder-class="pclass1" />
					</view>
				</view>
				<view class="item">
					<view class="t">开户行</view>
					<view class="b">
						<input :disabled="info.type == 'handle' ? false : true" type="text" v-model="info.paymentBank" placeholder="请输入" placeholder-class="pclass1" />
					</view>
				</view>
				<view class="item">
					<view class="t">支行</view>
					<view class="b">
						<input :disabled="info.type == 'handle' ? false : true" type="text" v-model="info.paymentBankChild" placeholder="请输入" placeholder-class="pclass1" />
					</view>
				</view>
			</view>
		</view>

		<view class="container" v-if="info.type == 'handle' || info.paymentType == 2">
			<view class="title" @click="info.paymentType = 2">
				<view class="title_left u-flex">
					<image src="/static/trad/y2.png" mode=""></image>
					支付宝
				</view>
				<view class="title_right">
					<image v-if="info.paymentType == 2" src="/static/c6.png" mode=""></image>
					<image v-else src="/static/c1.png" mode=""></image>
				</view>
			</view>
			<view class="list" v-show="info.paymentType == 2">
				<view class="item">
					<view class="t">账号</view>
					<view class="b">
						<input
							:disabled="info.type == 'handle' ? false : true"
							type="text"
							v-model="info.paymentAccount"
							placeholder="请输入"
							placeholder-class="pclass1"
							@input="handleInput"
							@blur="handleBlur"
						/>
					</view>
				</view>
				<view class="item">
					<view class="t">姓名</view>
					<view class="b">
						<input :disabled="info.type == 'handle' ? false : true" type="text" v-model="info.paymentName" placeholder="请输入" placeholder-class="pclass1" />
					</view>
				</view>
			</view>
		</view>

		<view class="container" v-if="info.type == 'handle' || info.paymentType == 3">
			<view class="title" @click="info.paymentType = 3">
				<view class="title_left u-flex">
					<image src="/static/trad/y3.png" mode=""></image>
					微信
				</view>
				<view class="title_right">
					<image v-if="info.paymentType == 3" src="/static/c6.png" mode=""></image>
					<image v-else src="/static/c1.png" mode=""></image>
				</view>
			</view>
			<view class="list" v-show="info.paymentType == 3">
				<view class="item">
					<view class="t">账号</view>
					<view class="b">
						<input
							@input="handleInput"
							@blur="handleBlur"
							:disabled="info.type == 'handle' ? false : true"
							type="text"
							v-model="info.paymentAccount"
							placeholder="请输入"
							placeholder-class="pclass1"
						/>
					</view>
				</view>
				<view class="item">
					<view class="t">姓名</view>
					<view class="b">
						<input :disabled="info.type == 'handle' ? false : true" type="text" v-model="info.paymentName" placeholder="请输入" placeholder-class="pclass1" />
					</view>
				</view>
			</view>
		</view>
		<view class="footer_btn" v-if="info.type == 'handle'">
			<view class="cont">
				<view class="btn" @click="submit" :class="{ on: isOn }">确认为本人收款，点击开始人脸核验</view>
			</view>
		</view>
	</view>
</template>

<script>
import { setpayment, getEidToken, getInfo } from '@/common/http.api.js';
import { startEid } from '@/pages/mp_ecard_sdk/main.js';
export default {
	data() {
		return {
			info: {}
		};
	},
	computed: {
		isOn() {
			if (this.info.paymentType === 1) {
				return !this.info.paymentAccount || !this.info.paymentName || !this.info.paymentBank || !this.info.paymentBankChild;
			} else if (this.info.paymentType === 2) {
				return !this.info.paymentAccount || !this.info.paymentName;
			} else if (this.info.paymentType === 3) {
				return !this.info.paymentAccount || !this.info.paymentName;
			}
			return true;
		}
	},
	onLoad(option) {
		this.info = JSON.parse(decodeURIComponent(option.obj));
		console.log(this.info);
	},
	methods: {
		handleInput(e) {
			let inputValue = e.detail?.value || e.target?.value || '';
			const filteredValue = inputValue.replace(/[\u4e00-\u9fa5]/g, '');
			this.$set(this.info, 'paymentAccount', filteredValue);
			this.$forceUpdate();
		},
		// 失去焦点时再次过滤（防止特殊场景下的漏网之鱼，如粘贴汉字后未触发input事件）
		handleBlur(e) {
			let inputValue = e.detail?.value || e.target?.value || '';
			const filteredValue = inputValue.replace(/[\u4e00-\u9fa5]/g, '');
			// 若失去焦点时仍有汉字，强制过滤并更新
			// this.$set(this.info, 'paymentAccount', filteredValue);
			setTimeout(()=>{
				this.info.paymentAccount == ''
				this.$forceUpdate();
				console.log('123123');
			},300)
		},
		issisi() {
			setpayment(this.info).then((res) => {
				if (res.code == 200) {
					this.$modal.msg('完成填写');
					setTimeout(() => {
						uni.navigateBack();
					}, 500);
				}
			});
		},
		submit() {
			let that = this;
			if (that.isOn) {
				that.$modal.msg('请完整填写信息');
				return;
			}
			uni.showLoading({
				title: '加载中...'
			});
			getEidToken().then((res) => {
				if (res.code == 200) {
					uni.hideLoading();
					startEid({
						data: {
							token: res.data.EidToken,
							enableEmbedded: true,
							allowFullScreen: false
						},
						verifyDoneCallback(res) {
							const { token, verifyDone } = res;
							if (verifyDone) {
								getInfo({
									eidToken: token,
									userName: that.info.paymentName
								}).then((check) => {
									console.log(check, '------------');
									if (check.code == 200 && check.data.check) {
										that.issisi();
									} else {
										that.$modal.msg('核验失败,实名信息错误');
									}
								});
							} else {
								that.$modal.msg('核验失败');
							}
						}
					});
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.container {
	background-color: #fff;
	width: 710rpx;
	margin: 20rpx auto;
	padding: 20rpx 30rpx;
	box-sizing: border-box;
	border-radius: 20rpx;

	.title {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.title_left {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #11192d;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 15rpx;
			}
		}

		.title_right {
			image {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}

	.list {
		background: #f9f9f9;
		border-radius: 20rpx;
		padding: 0rpx 30rpx;
		box-sizing: border-box;
		margin-top: 30rpx;

		.item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px solid #ededed;
			padding: 20rpx 0rpx;

			.t {
				font-size: 28rpx;
				color: #11192d;
				width: 150rpx;
			}

			.b {
				flex: 1;
				color: #11192d;
				font-size: 28rpx;

				input {
					margin-left: 15rpx;
					color: #11192d;
					font-size: 28rpx;
				}
			}
		}

		.item:last-child {
			border: none;
		}
	}
}
</style>
